
<!-- 工单管理（小程序） -->
<template>
  <div class="page">
      <div class="nuclein-query">
          <template v-for="(item,index) in davd">
            <div :class="'police_box police_box' + index">
              <div class="police_title">
                <div class="police_name">{{item.name}}</div>
                <div :class="'police_bg police_bg' + index"></div>
              </div>
              <div class="police_num">{{item.num}}次</div>
            </div>
          </template>
      </div>
      <div class="query">
            <el-form :ref="query" :form="query" :inline="true" label-width="5em">
                <el-form-item label="报警类型">
                    <el-select v-model="query.deviceType" size="small" style="width: 120px">
                        <el-option :value="null" label="全部"></el-option>
                        <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警位置">
                    <el-select style="width: 120px" v-model="query.doorDeviceType" size="small">
                        <el-option label="全部" :value="null"></el-option>
                        <el-option v-for="(value, key) in doorDeviceTypeList" :key="value.label" :label="value.label"
                            :value="value.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备">
                    <el-select v-model="query.status" size="small" style="width: 120px">
                        <el-option :value="null" label="全部"></el-option>
                        <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="事件状态">
                    <el-select v-model="query.status" size="small" style="width: 120px">
                        <el-option :value="null" label="全部"></el-option>
                        <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预警时间" label-width="7em">
                    <el-date-picker v-model="query.lastLoginTime" end-placeholder="结束时间" size="small"
                        start-placeholder="开始时间" type="daterange" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-button size="small" type="primary" @click="gitList">查询</el-button>
                    <el-button size="small" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
      <div class="content-row">
          <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="名称" align="center" width="120">
              </el-table-column>
              <el-table-column prop="weiz" label="位置信息" align="center">
              </el-table-column>
              <el-table-column prop="deName" label="设备名称" align="center">
              </el-table-column>
              <el-table-column prop="url" label="事件照片" align="center" width="120">
                <template slot-scope="scope">
                        <img style="width:40px;height: 40px;" :src="scope.row.url" alt="">
                    </template>
              </el-table-column>
              <el-table-column prop="baojingTime" label="报警时间" align="center">
              </el-table-column>
              <el-table-column prop="sjState" label="事件状态" align="center" width="120">
                <template slot-scope="scope">
                  <el-progress v-if="(scope.row.sjState == 0)" :percentage="scope.row.stateNamber" status="success" :color="customColors"></el-progress>
                  <el-progress v-if="(scope.row.sjState == 1)" :percentage="scope.row.stateNamber" status="warning" :color="customColors"></el-progress>
                  <el-progress v-if="(scope.row.sjState == 2)" :percentage="scope.row.stateNamber" status="exception" :color="customColors"></el-progress>
                  <el-progress v-if="(scope.row.sjState == 3)" :percentage="scope.row.stateNamber" status="success" :color="customColors"></el-progress>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="220">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" @click="handleEdit(scope.row.sysWorkApplyId)">督办</el-button>
                      <el-button size="mini" type="text" @click="handleDatail(scope.row)">查看事件</el-button>
                    </template>
                </el-table-column>
          </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="query.page" :page-sizes="[5, 10, 20, 30, 40]" :page-size="query.size"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
      </div>
      <el-dialog title="详情信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div style="line-height: 40px;"><span>名称：</span><span>{{ detailedData.name }}</span></div>
        <div style="line-height: 40px;"><span>位置信息：</span><span>{{ detailedData.weiz }}</span></div>
        <div style="line-height: 40px;"><span>设备名称：</span><span>{{ detailedData.deName }}</span></div>
        <div style="line-height: 40px;"><span>报警时间：</span><span>{{ detailedData.baojingTime }}</span></div>
        <div style="line-height: 40px;"><span>事件状态：</span><span>{{ detailedData.sjState == 0?'待审核':'处理中' }}</span></div>
        <div style="line-height: 40px;">
          <div style="line-height: 40px;">事件图片：</div>
          <img style="width: 220px;" :src="detailedData.url" alt="">
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {
  data () {
    return {
      query: {
        page: 1,
        size: 5,
        lastLoginTime: '',
        status: '',
        doorDeviceType: '',
        deviceType: ''
      },
      dialogVisible: false,
      detailedData: [],
      deviceStatusList: [],
      doorDeviceTypeList: [],
      deviceTypeList: [],
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      davd: [{ name: '猫狗报警', num: 30 }, { name: '电动车报警', num: 49 }, { name: '火情报警', num: 80 }],
      total: 0,
      tableData: [
        { name: '高空抛物', weiz: 'xx街道', stateNamber: 20, deName: 'A1点位', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', baojingTime: '2022-10-08  10:00', sjState: 0 },
        { name: '垃圾清溢', weiz: 'xx街道', stateNamber: 30, deName: 'A1点位', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', baojingTime: '2022-10-08  10:00', sjState: 1 },
        { name: '机动车违停', weiz: 'xx街道', stateNamber: 60, deName: 'A1点位', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', baojingTime: '2022-10-08  10:00', sjState: 2 },
        { name: '人群密集', weiz: 'xx街道', stateNamber: 90, deName: 'A1点位', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', baojingTime: '2022-10-08  10:00', sjState: 3 }
      ],
      inspectionState: []
    }
  },
  created () {
    this.gitList()
  },
  methods: {
    handleReset () {

    },
    gitList () {

    },
    handleDatail (e) {
      this.dialogVisible = true
      this.detailedData = e
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 分页
    handleSizeChange (val) {
      this.pageLimit.size = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.pageLimit.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
  position: relative;
  height: 100%;
}

.dialog_butt {
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0px;
}

.nuclein-query {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #DCDFE6;
}

.device-type {
  display: flex;
  align-items: center;
  padding: 20px 20px 10px 20px;
}

.device-type>p {
  margin-right: 20px;
}

.content-row {
  overflow: hidden;
}

.device-type {
  display: flex;
  align-items: center;
  padding: 20px 20px 10px 20px;
}

.police_box{
  width: 300px;
  height: 130px;
  border-radius: 1px;
  margin-right: 25px;
}
.police_box0{
  background: linear-gradient(92deg, #18B0FF, #90D9FE);
}
.police_box1{
  background: linear-gradient(92deg, #36CAA2, #59ECC8);
}
.police_box2{
  background: linear-gradient(92deg, #B786FB, #D6B1FB);
}
.police_title{
  width: 103px;
  text-align: center;
  margin-left: 8px;
  margin-top: 14px;
}
.police_name{
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #FFFFFF;
}
.police_bg{
  width: 100%;
  height: 3px;
}
.police_bg0{
  background-image: radial-gradient(white 30%,#43BAFF 60%);
}
.police_bg1{
  background-image: radial-gradient(white 30%,#3ED0A9 60%);
}
.police_bg2{
  background-image: radial-gradient(white 30%,#C297FB 60%);
}
.police_num{
  font-size: 36px;
  color: #FFFFFF;
  padding-top: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.query {
    padding: 20px;
    padding-bottom: 0px;
}
</style>
